<template>
  <div class="rod-rodmanage">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">一体杆名称：</div>
      <el-input
        v-model="params.poleName"
        clearable
        placeholder="请输一体杆名称"
        class="search-main"
        @clear="classSearch"
      />
      <div class="search-label">一体杆编号：</div>
      <el-input
        v-model="params.poleNumber"
        clearable
        placeholder="请输一体杆编号"
        class="search-main"
        @clear="classSearch"
      />
      <div class="search-label">运行状态：</div>
      <el-select v-model="params.poleStatus" placeholder="请选择">
        <el-option
          v-for="item in status"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="doSearch">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="openDialog">添加一体杆</el-button>
      <el-button type="primary" @click="delRodList">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="list"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" :index="indexMethod" />
        <el-table-column label="一体杆名称" width="180" prop="poleName" />
        <el-table-column label="一体杆编号" width="180" prop="poleNumber" />
        <el-table-column label="一体杆IP" width="120" prop="poleIp" />
        <el-table-column label="安装区域" width="120" prop="areaId" />
        <el-table-column label="一体杆类型" prop="poleType">
          <template #default="scope">
            {{ scope.row.poleType == 'entrance' ? '入口' : '	出口' }}
          </template>
        </el-table-column>
        <el-table-column label="运行状态" prop="poleStatus">
          <template #default="scope">
            {{ formatStatus(scope.row.poleStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="emit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="del(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        />
      </el-pagination>
    </div>
    <!-- 添加员工 -->
    <el-dialog
      :title="addForm.id ? '编辑一体杆' : '添加一体杆'"
      :visible="dialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <!-- 表单接口 弹框 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="一体杆名称" prop="poleName">
            <el-input
              v-model="addForm.poleName"
              placeholder="请输入一体杆名称"
            />
          </el-form-item>
          <el-form-item label="一体杆编号" prop="poleNumber">
            <el-input
              v-model="addForm.poleNumber"
              placeholder="请输入一体杆编号"
              :disabled="addForm.id ? true : false"
            />
          </el-form-item>
          <el-form-item label="一体杆ip" prop="poleIp">
            <el-input v-model="addForm.poleIp" placeholder="请输入一体杆ip" />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId">
            <el-select
              v-model="addForm.areaId"
              placeholder="关联区域"
              class="int1"
            >
              <el-option
                v-for="item in areaNameList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType">
            <el-select
              v-model="addForm.poleType"
              placeholder="一体杆类型"
              class="int1"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.text"
                :value="item.text"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 弹框确认和取消按键 -->
      <template #footer>
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="addList"
        >确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRodMagnageListAPI,
  getDelListAPI,
  getaeraDropListAPI,
  getAddListAPI,
  getEmitListAPI
} from '@/api/rodmanage'
export default {
  name: 'RodRodmanage',
  data() {
    return {
      // 一体杆类型
      status: [
        { text: '出口', value: 0 },
        { text: '入口', value: 1 }
      ],
      params: {
        page: 1, // 页数
        pageSize: 10 // 每页条数
      },
      total: 0, // 总页数
      list: [], // 接受数据
      selectedCarList: '', // 全选数据
      dialogVisible: false, // 弹框
      addForm: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: null,
        poleType: null
      },
      addFormRules: {
        poleName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        poleType: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      areaNameList: [] // 区域下拉列表i哦
    }
  },
  created() {
    this.getRodMagnageList()
  },
  methods: {
    // 获取数据渲染页面
    async getRodMagnageList() {
      const res = await getRodMagnageListAPI(this.params)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 每页多少条
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getRodMagnageList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.params.page = val
      this.getRodMagnageList()
    },
    // 序号
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    // 用户选择的数据 多选框操作
    handleSelectionChange(val) {
      this.selectedCarList = val
    },
    // 状态
    formatStatus(poleStatus) {
      const statusMap = {
        0: '可用',
        1: '不可用'
      }
      return statusMap[poleStatus]
    },
    // 查询处理
    doSearch() {
      this.params.page = 1
      this.getRodMagnageList()
    },
    // 查询清空
    classSearch() {
      this.params.page = 1
      this.getRodMagnageList()
    },
    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async() => {
          this.$message.success('删除成功')
          // 如果最后一页最后一个数据删除就减去一页
          if (this.list.length === 1 && this.params.page > 1) {
            this.params.page--
          }
          await getDelListAPI(id)
          this.getRodMagnageList()
        })
        .catch(() => {})
    },
    // 批量删除
    delRodList() {
      // 如果全选框长度小于0，那么就提示还没选中
      if (this.selectedCarList.length <= 0) {
        this.$message.warning('还未选中要删除的数据')
        return
      }
      this.$confirm('是否删除', '提示', { type: 'warning' })
        .then(async() => {
          // 处理id
          // 把选中的每一项放进一个变量
          const idList = this.selectedCarList.map(item => item.id)
          // 调用删除接口删除 每一项用，逗号连接
          await getDelListAPI(idList.join(','))
          // if (this.cardList.length === 1 && this.params.page > 1) {
          //   this.params.page = 1
          // }
          this.getRodMagnageList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          // console.log(error)
        })
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.$refs.addForm.resetFields()
      this.addForm = {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: null,
        poleType: null
      }
    },
    // 打开弹窗
    async openDialog() {
      this.dialogVisible = true
      const res = await getaeraDropListAPI(this.addForm)
      // console.log(res)
      this.areaNameList = res.data
      delete this.addForm.areaName
      delete this.addForm.poleStatus
      this.getRodMagnageList()
    },
    // 全部校验 添加 编辑
    addList() {
      this.$refs.addForm.validate(async val => {
        if (!val) {
          return
        }
        if (this.addForm.id) {
          await getEmitListAPI(this.addForm)
          this.$message.success('编辑成功')
        } else {
          await getAddListAPI(this.addForm)
          this.$message.success('添加成功')
        }
        this.getRodMagnageList()
        this.closeDialog()
      })
    },
    // 编辑
    emit(row) {
      this.openDialog()
      this.addForm = row
    }
  }
}
</script>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.int1 {
  width: 100%;
}
</style>
